<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="./js/echarts.js"></script>
    <link href="./css/bootstrap.min.css"  type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>权限图表</legend>

</fieldset>
<a href="${pageContext.request.contextPath}/role?type=roleList" type="button" class="btn btn btn-success input-sm btn_search ">详情</a>
<div id="main" style="width: 900px; height: 400px"></div>


<script>
    let json = JSON.parse('${roleListJson}');
    console.log(json);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main', 'category'));
    // 绘制图表
    myChart.setOption({
        tooltip: {},
        xAxis: {
            // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            data: [
                json[0].roleName,
                json[1].roleName,
                json[2].roleName
            ]
        },
        yAxis: {},
        series: [
            {
                name: '所属人数',
                type: 'bar',
                // data: [5, 20, 36, 10, 10, 20]
                data: [
                    json[0].userCount,
                    json[1].userCount,
                    json[2].userCount
                ]
            }
        ]
    });
</script>

</body>
</html>
